<template>
	<view class="content">
		<uni-nav-bar
			background-color="#efefef" 
			color="#5287b1" 
			title="留言"
			left-icon="left"
			@clickLeft="back()"
			height="6vh"
		></uni-nav-bar>
		<view class="orderBy">
			<span class="new" @click="checkOrderBy(0)" :class="{'new-color': orderBy === 0}">新的在前</span>
			|
			<span class="old" @click="checkOrderBy(1)" :class="{'new-color': orderBy === 1}">旧的在前</span>
			</view>
		<view class="show" >
			
			<view class="vioce" v-for="item,index in voices" :key="index">
				<image :src="item.imgUrl" class="titleImg" mode="aspectFill"></image>
				<span class="name">
					{{item.name}}
					<text class="time">{{item.time}}</text>
				</span>
				<view class="message">
					<text>
						{{item.content}}
					</text>
					
					<view class="opt">
						<uni-icons type="heart" size="18" :color="item.isLike" @click="clickLike(index,item.id)">{{item.likes}}</uni-icons>
						<span class="toReplay"><uni-icons type="undo" size="18" @click="reply(item.id,item.name)">回复</uni-icons></span>
						
					</view>
					<hr/>
				</view>
				<view class="replayList" v-for="rep in item.replay" :key="rep.id">
					{{rep.name}}<text style="font-weight: bold;font-size: 2.1vh; margin-left: 0.5vh;margin-right: 0.5vh;">&nbsp;回复&nbsp;</text>{{item.name}}:
					<text class="repContent">
						{{rep.content}}
						<text class="time">{{rep.time}}</text>
					</text>
				</view>
				
			</view>
			
			
		</view>
		<view class="notes">
			<view class="replay">
				
				<uni-icons type="clear" size="17" color="#b6b6b6" v-if="isReplay" @click="cancelReplay">回复  {{replayName}}</uni-icons>
			</view>
			<textarea class="textA" placeholder="留言" v-model="replayTxt"></textarea>
			<view class="issue">
				<text @click="toIssue()">发布</text>
			</view>
		</view>
		
	</view>
	
	
</template>

<script>
	import {getComment,isLikeComment,clickLikeComment,addComment} from '@/api/comment.js';
	export default {
		data() {
			return {
				// 留言
				voices:[
					{	
						id:"5",
						name:"小猫",
						imgUrl:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",
						time:"三天前",
						author_id:"1",
						content:"即使前方的道路充满荆棘，只要你心中怀有希望，勇往直前，就一定能够战胜一切困难，实现自己的梦想。因为希望是内心的力量，它能让你变得更强，更勇敢，更坚定。希望之光将照亮你前行的路，让你成为更好的自己。",
						likes:"4",
						isLike:'',
						replay:[
							{
								name:"咕噜噜",
								content:"谢谢你",
								time:"5分钟前",
								id:"8",
								author_id:"2",
							},
							{
								name:"小狗",
								content:"哈哈哈",
								time:"6分钟前",
								id:"5",
								author_id:"3",
								
							},
							{
								name:"lanlan",
								content:"来了~",
								time:"11分钟前",
								id:"9",
								author_id:"2",
								
							}
						]
					},
					{  
						id:"6",  
						name:"小熊",  
						imgUrl:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",  
						time:"一周前",  
						content:"人生就像一盒巧克力，你永远不知道下一块是什么味道。但正是因为未知，才让生活充满惊喜和挑战。不要害怕尝试，不要畏惧未知，勇敢地迈出每一步，去迎接那些美好的可能。",  
						likes:"3",  
						author_id:"1",
						isLike:'',
						replay:[]  
					},
					{  
						id:"10",  
						name:"小兔",  
						imgUrl:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",  
						time:"三个月前",  
						content:"在人生的旅途中，我们会遇到形形色色的人，有些人会成为我们的朋友，有些人则会给我们带来挑战。但正是这些经历，让我们成长，让我们变得更加成熟和坚强。感谢那些陪伴我们走过人生旅途的人，也感谢那些给我们留下深刻教训的人。",  
						likes:"2",  
						author_id:"4",
						isLike:'',
						replay:[]  
					},
					{  
							id:"11",  
							name:"小鹿",  
							imgUrl:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png",  
							time:"一个月前",  
							content:"当你觉得前路迷茫时，不妨停下来，深呼吸，找回内心的平静。记住，只有自己才能决定自己的未来。勇敢地迈出每一步，去追寻自己的梦想，去创造属于自己的辉煌。",  
							likes:"6",  
							author_id:"1",
							isLike:'',
							replay: [  
								{  
									name:"小狗",  
									content:"加油！",  
									time:"刚刚",  
									author_id:"1",
									id:"5"  
								},  
								{  
									name:"小猫",  
									content:"我相信你一定能够实现自己的梦想！",  
									time:"1分钟前",  
									author_id:"2",
									id:"7"  
								}  
							]  
						}  
				],
				replayTxt:"",
				treeHoldId:"",
				id:"",
				token:"",
				replyId:null,
				isReplay:false,
				replayName:"",
				orderBy:0
			};
		},
		onLoad(e) {
			this.getMessage()
			this.treeHoldId = e.treeHoldId;
			this.getCommentById()
			
		},
		methods:{
			//切换排序
			checkOrderBy(orderBy){
				this.orderBy =orderBy
				this.getCommentById()
			},
			//取消回复
			cancelReplay(){
				this.replyId = null;
				this.isReplay = false
				this.replayName = ""
			},
			//回复
			reply(id,name){
				this.replyId = id;
				this.isReplay = true
				this.replayName = name
			},
			// 点击like的事件
			clickLike(index,id){
				console.log(index)
				if(this.voices[index].isLike == 'red'){
					this.voices[index].isLike = ''
					this.voices[index].likes -= 1;
				}else{
					this.voices[index].isLike = 'red'
					this.voices[index].likes += 1;
				}
				clickLikeComment({
					"token":this.token,
					"userId":this.id,
					"commentId":id
				}).then(res=>{
					console.log(res)
				})
			},
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toIssue(){
				console.log(this.replayTxt)
				const data = {
					"treeHoldId":this.treeHoldId,
					"content":this.replayTxt,
					"authorId":this.id,
					"replyId":this.replyId,
					"token":this.token
				}
				this.insertComment(data)
				
			},
			insertComment(data){
				addComment(data).then(res=>{
					console.log(res)
					this.replayTxt = ""
					this.getCommentById()
				})
			},
			
			//获取评论
			getCommentById(){
				getComment({
					"treeHoldId":this.treeHoldId,
					"orderBy":this.orderBy,
					"token":this.token
				}).then(res=>{
					this.voices = res.data.data
					this.isLike()

				})
			},
			isLike(){
				const data = this.voices;
				const newData = [];
				for (let i = 0, len = this.voices.length; i < len; i++ ) {
					 isLikeComment({
						"token":this.token,
						"userId":this.id,
						"commentId":this.voices[i].id
					}).then(res=>{
						console.log(res.data.data)
						if(res.data.data==1){
							this.voices[i].isLike = 'red'
							console.log(this.voices[i].isLike)
						}else{
							this.voices[i].isLike = ''
						}
					})
				}
				
			}
		
		},
		
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-gary;
		color: #343434;
	}
	hr{
		margin-bottom: 1vh;
	}
	.content{
		.orderBy{
			position: absolute;
			right: 0%;
			color: $font-gray;
			.new-color {  
			    color: #4a87b6;  
			}
		}
		.show{
			margin-top: 2vh;
			width: 100%;
			height: 76vh;
			overflow-x: auto;
			.vioce{
				padding-left: 2vh;
				padding-right: 2vh;
				background-color: white;
				width: 80%;
				margin: auto;
				padding-top: 2vh;
				margin-top: 6vh;
				margin-bottom: 6vh;
				.titleImg{
					width: 8vh;
					height: 8vh;
					border-radius: 8vh;
					position: relative;
					left: -4vh;
				}
				.name{
					position: relative;
					left: -2vh;
					top: -3vh;
					font-size: 2.4vh;
					.time{
						font-size: 1.4vh;
						padding-left: 2vh;
					}
				}
				.message{
					text{
						font-size: 2vh;
						margin-bottom: 2vh;
					}
					.opt{
						
						width: 100%;
						margin-top: 10rpx;
						padding-bottom: 10rpx;
						.toReplay{
							text-align: right;
							position: relative;
							margin-left: 2vh;
							
						}
						
					}
					
				}
				.replayList{
					margin: 1vh;
					font-size: 1.8vh;
					padding-bottom: 5rpx;
					.repContent{
						.time{
							font-size: 1.2vh;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.notes{
			width: 100%;
			height: 18vh;
			background-color: white;
			position: absolute;
			bottom: 0%;
			
			.replay{
				background-color: $bg-gary;
				color: $font-gray;
				padding-left: 2vh;
				height: 3vh;
				width: 100%;
			}
			.textA{
				margin-top: 1vh;
				font-size: 1.8vh;
				padding: 1vh;
				// background-color: cadetblue;
				width: 90%;
				height: 60%;
				margin: auto;
				
			}
			.issue{
				font-size: 2vh;
				color:$font-blue;
				text-align: right;
				padding-right: 2vh;
			}
		}
	}
</style>
